<template>
  <uv-popup ref="popup" round="15">
    <view class="mainWrap textCenter">
      <!-- 0 未提交 1-审核通过 2-审核中 -->
      <view v-if="counter.slParams.userInfo.isreal==1" class="fz14">你已完成实名认证，年份无法修改</view>
      <view v-else class="fz14">您未完成实名认证，请完成实名认证确定年份</view>
      <view class="constellation fz14 bold">{{constellation}}</view>

      <picker-view :value="birthdayValue" @change="bindChange" class="picker-view">
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in years" :key="index" :class="{active: index ==birthdayValue[0]}">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in months" :key="index" :class="{active: index ==birthdayValue[1]}">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in days" :key="index" :class="{active: index ==birthdayValue[2]}">{{item}}日</view>
        </picker-view-column>
      </picker-view>

      <view class="button" @click="save">
        <uv-button text="确定" color="#F1618B" shape="circle" :disabled="counter.slParams.userInfo.isreal!=0"></uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
let props = defineProps(["birthday", "constellation"]);
const emit = defineEmits(["update:birthday", "update:constellation"]);

let birthdayValue = ref([]);
let constellation = ref("");
let birthday = ref("");

let indicatorStyle = ref({
  height: "50px",
});

let years = computed(() => {
  let arr = [];
  for (let index = 1960; index <= 2007; index++) {
    arr.push(index);
  }
  return arr;
});

let months = computed(() => {
  let arr = [];
  for (let index = 1; index <= 12; index++) {
    arr.push(proxy.$utils.p(index).toString());
  }
  return arr;
});

let days = computed(() => {
  let current = 0;
  if (birthdayValue.value.length >= 1) current = birthdayValue.value[1];
  let allDays = getDaysInMonth(removeLeadingZero(months.value[current]));
  let arr = [];
  for (let index = 1; index <= allDays; index++) {
    arr.push(proxy.$utils.p(index).toString());
  }
  return arr;
});

function removeLeadingZero(number) {
  return parseInt(number, 10).toString();
}

//传入月份，判断这个月一共多少天
function getDaysInMonth(month) {
  const date = new Date();
  date.setMonth(month - 1); // 月份从0开始，所以要减去1
  date.setDate(1); // 设置为月份的第一天
  date.setMonth(date.getMonth() + 1); // 设置为下个月
  date.setDate(0); // 获取上个月的最后一天，即当前月的总天数
  return date.getDate();
}

async function open(birthday, e) {
  instance.refs.popup.open("bottom");
}

function save() {
  emit("update:birthday", birthday.value);
  emit("update:constellation", constellation.value);
  instance.refs.popup.close();
}

function getDateInfo(dateString) {
  const [year, month, day] = dateString.split("-");
  return { year, month, day };
}

async function bindChange(e) {
  birthdayValue.value = e.detail.value;
  birthday.value = `${years.value[birthdayValue.value[0]]}-${
    months.value[birthdayValue.value[1]]
  }-${days.value[birthdayValue.value[2]]}`;
  constellation.value = await proxy.$apis.getConstellation({
    birthday: birthday.value,
  });
}

watch(
  () => props.birthday,
  (newValue, oldValue) => {
    if (newValue) {
      const dateInfo = getDateInfo(counter.slParams.userInfo.birthday);
      let current0 = years.value.indexOf(Number(dateInfo.year));
      if (current0 != -1) birthdayValue.value = [current0];
      let current1 = months.value.indexOf(dateInfo.month);
      if (current1 != -1) birthdayValue.value = [current0, current1];
      let current2 = days.value.indexOf(dateInfo.day);
      if (current2 != -1) birthdayValue.value = [current0, current1, current2];
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => props.constellation,
  (newValue, oldValue) => {
    if (newValue) constellation.value = newValue;
  },
  { deep: true, immediate: true }
);

defineExpose({ open });
</script>



<style lang="scss" scoped>
.mainWrap {
  padding: 25px 35px;
  .constellation {
    background-color: #e9e9e9;
    color: #333333;
    display: inline-block;
    margin-top: 12px;
    padding: 7px 22px;
    border-radius: 4px;
  }

  .picker-view {
    width: 100%;
    height: 150px;
    margin: 25px 0;
    .timeItem {
      line-height: 34px;
      text-align: center;
    }
  }
}
</style>






